export default {
    data() {
        return {
            dtBegin: this.$moment('2022-07-13 17:54:00').format('YYYY-MM-DD HH:mm'),
            dtEnd: this.$moment('2022-07-13 19:54:00').format('YYYY-MM-DD HH:mm'),
            showPayer: false
        }
    },
    computed: {
        playerIndex() {
            return this.$store.getters.playerIndex
        }
    },
    watch: {
        playerIndex: {
            handler: function(index) {
                if (this.$store.getters.playerParams.name !== 'Weather') return
                this.$nextTick(() => {
                    this.creatWeather(index)
                })
            }
        }
    },
    beforeDestroy() {
        this.clearWeather()
        this.$store.dispatch('playerClose')
        this.$eventBus.$off('showWeatherPlayer')
    },
    created() {
        this.imageArr = []
        this.$eventBus.$on('GetWeatherRadarParams', (e) => {
            // console.log(e)
            this.dtBegin = e.dtBegin
            this.dtEnd = e.dtEnd
        })
        this.$eventBus.$on('showWeatherPlayer', this.changeLadar)
    },
    methods: {
        changeLadar() {
            this.showPayer = !this.showPayer
            if (this.showPayer) {
                this.getWeatherData()
            } else {
                this.clearWeather()
                this.$store.dispatch('playerClose')
            }
        },
        getWeatherData() {
            var timeArr = []
            var imgUrl = []
            var url = '/api/Basin/GetWeatherRadar'
            var prarms = {
                dtBegin: this.dtBegin,
                dtEnd: this.dtEnd
            }
            this.$api.Get(url, prarms).then(res => {
                if (res && res.data) {
                    res.data.forEach(item => {
                        timeArr.push(item.tm)
                        imgUrl.push(item.url)
                    })
                    this.imgUrl = imgUrl
                    var player = this.$store.getters.playerParams
                    player.name = 'Weather'
                    player.width = '45%'
                    player.dragReal = true
                    player.show = true
                    player.currIndex = 0
                    player.times = timeArr
                    this.$store.dispatch('playerParams', player)
                }
            })
        },
        creatWeather(index) {
            this.clearWeather()
            var rectangle = Cesium.Rectangle.fromDegrees(104, 31.01, 113, 40)
            const imageryProvider = new Cesium.SingleTileImageryProvider({
                url: this.imgUrl[index],
                rectangle: rectangle
            })
            var imagelayer = new Cesium.ImageryLayer(imageryProvider, { alpha: 1 })
            this.$viewer.imageryLayers.add(imagelayer)
            this.lastLadarLayer = imagelayer

            // this.imageArr.push(imagelayer)
        },
        clearWeather() {
            if (this.lastLadarLayer) {
                var temp = this.lastLadarLayer
                var timeTepm = setInterval(() => {
                    temp.alpha -= 0.05
                    if (temp.alpha < 0.1) {
                        clearInterval(timeTepm)
                        this.$viewer.imageryLayers.remove(temp)
                    }
                }, 40)
            }
        }
    }
}
